<template>
    <div class="editor-wrapper">
        <!-- <div :id="editorId" style="height: auto"></div> -->
        <div id="div1" class="toolbar"></div>
        <Spin fix v-if="showLoading" style="z-index:9999999">
            <Icon type="ios-loading" size=18 class="demo-spin-icon-load"></Icon>
            <div>正在上传文件...</div>
        </Spin>
        <Divider>分割线</Divider>
        <div :id="editorId" class="text"> <!--可使用 min-height 实现编辑区域自动增加高度-->
            <p>请输入内容</p>
        </div>
    </div>
</template>

<script>
    import Editor from 'wangeditor'
    import baseUrl from '_conf/url'
    import 'wangeditor/release/wangEditor.min.css'
    import {
        oneOf
    } from '@/libs/tools'
    export default {
        name: 'Editor',
        props: {
            value: {
                type: String,
                default: ''
            },
            /**
             * 绑定的值的类型, enum: ['html', 'text']
             */
            valueType: {
                type: String,
                default: 'html',
                validator: (val) => {
                    return oneOf(val, ['html', 'text'])
                }
            },
            /**
             * @description 设置change事件触发时间间隔
             */
            changeInterval: {
                type: Number,
                default: 200
            },
            /**
             * @description 是否开启本地存储
             */
            cache: {
                type: Boolean,
                default: true
            }
        },
        computed: {
            editorId() {
                return `editor${this._uid}`
            }
        },
        data() {
            return {
                showLoading: false
            }
        },
        mounted() {
            this.editor = new Editor('#div1', `#${this.editorId}`);
            const _self = this;
            this.editor.customConfig.onchange = (html) => {
                let text = this.editor.txt.text()
                if (this.cache) localStorage.editorCache = html
                this.$emit('input', this.valueType === 'html' ? html : text)
                this.$emit('on-change', html, text)
            }
            this.editor.customConfig.onchangeTimeout = this.changeInterval;
            // 上传图片的接口
            this.editor.customConfig.uploadImgServer = baseUrl + '/uploadFile';
            // 附带的参数
            this.editor.customConfig.uploadImgParams = {
                // 如果版本 <=v3.1.0 ，属性值会自动进行 encode ，此处无需 encode
                // 如果版本 >=v3.1.1 ，属性值不会自动 encode ，如有需要自己手动 encode
                // token: 'abcdef12345'
            }
            // 自定义header
            this.editor.customConfig.uploadImgHeaders = {
                // 'Accept': 'text/x-json'
            }
            // 自定义字段名
            this.editor.customConfig.uploadFileName = 'file';
            // 跨域传递cookie
            this.editor.customConfig.withCredentials = true;
            // 监听函数
            this.editor.customConfig.uploadImgHooks = {
                before: function(xhr, editor, files) {
                    // 图片上传之前触发
                    // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，files 是选择的图片文件

                    // 如果返回的结果是 {prevent: true, msg: 'xxxx'} 则表示用户放弃上传
                    // return {
                    //     prevent: true,
                    //     msg: '放弃上传'
                    // }
                    _self.showLoading = true;
                    return true;
                },
                success: function(xhr, editor, result) {
                    setTimeout(() => {
                    console.log(123123);

                        _self.showLoading = false;
                    }, 1000);

                    // 图片上传并返回结果，图片插入成功之后触发
                    // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果
                },
                fail: function(xhr, editor, result) {
                    // 图片上传并返回结果，但图片插入错误时触发
                    // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果
                },
                error: function(xhr, editor) {
                    // 图片上传出错时触发
                    // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象
                },
                timeout: function(xhr, editor) {
                    // 图片上传超时时触发
                    // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象
                },

                // 如果服务器端返回的不是 {errno:0, data: [...]} 这种格式，可使用该配置
                // （但是，服务器端返回的必须是一个 JSON 格式字符串！！！否则会报错）
                customInsert: function(insertImg, result, editor) {

                    // 图片上传并返回结果，自定义插入图片的事件（而不是编辑器自动插入图片！！！）
                    // insertImg 是插入图片的函数，editor 是编辑器对象，result 是服务器端返回的结果

                    // 举例：假如上传图片成功后，服务器端返回的是 {url:'....'} 这种格式，即可这样插入图片：
                    var url = baseUrl+result.data.path
                    insertImg(url)

                    // result 必须是一个 JSON 格式字符串！！！否则报错
                }
            }

        // create这个方法一定要在所有配置项之后调用
        this.editor.create();

        this.editor.txt.html('<p>请输入内容...</p>');
        // 如果本地有存储加载本地存储内容
        // let html = localStorage.editorCache
        // if (html) this.editor.txt.html(html)
    }
    }
</script>

<style>
    .toolbar {
            border: 1px solid #ccc;
        }
        .text {
            border: 1px solid #ccc;
            height: 600px;
        }
        .demo-spin-icon-load{
        animation: ani-demo-spin 1s linear infinite;
    }
    @keyframes ani-demo-spin {
        from { transform: rotate(0deg);}
        50%  { transform: rotate(180deg);}
        to   { transform: rotate(360deg);}
    }
</style>
